<template>
  <!-- 播放音乐这个模块是全局配置的，切换页面并不会导致它消失，所以为了渲染它，需要使用vuex -->
  <div class="box">
    <div class="playMusic" @click="changePopup">
      <img :src="musicPic" alt="" :style="{ width: '50px' }" class="playImg" />
      <p class="info">
        <span :style="{ fontSize: '14px', color: '#575757' }">{{
          musicName
        }}</span>
        <span :style="{ fontSize: '8px', overflow: 'hidden' }">{{
          singerName 
        }}</span>
      </p>

      <!-- 根据播放状态显示不同的icon -->
      <svg class="icon" aria-hidden="true" @click.stop="turnBtn" v-if="flag">
        <use xlink:href="#icon-zanting"></use>
      </svg>
      <svg class="icon" aria-hidden="true" @click.stop="turnBtn" v-else>
        <use xlink:href="#icon-bofang"></use>
      </svg>

      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-gengduotiaojie"></use>
      </svg>

      <!-- 播放音乐是一个隐藏的标签实现的，通过拿到音乐的id，调用接口后即可得到url  -->
      <audio :src="musicUrl" ref="audio" :loop="XplayingModel"  id='audio'></audio>
    </div>

    <van-popup
      v-model="playPageFlag"
      position="right"
      :style="{ height: '100%', width: '100%' }"
    >
      <playPage
        :playingList="songsList[whichSong]"
        :flag="flag"
        :turnBtn="turnBtn"
        :changePopup="changePopup"
        :playingSongData="playingSongData"
        :playingTimes="playingTimes"
        :duration='duration'
        :playingTimesInval='playingTimesInval'
      ></playPage>
    </van-popup>
  </div>
</template>

<script>
import * as playMusic from "@/api/getmusic";
import playPage from "@/components/search/playPage.vue";
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      // 歌手名字
      singerName: "",
      // 正在播放的歌曲
      musicUrl: "http://m701.music.126.net/20220922114700/8f9f1bc59c1e68bfe745acb2a9917453/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/14096426578/ff65/7348/d83f/36ab528a5935b3ee552768bd939af6cf.mp3",

      // 正在播放的歌曲的图片
      musicPic: "",

      // 定义歌曲详情页(磁盘，歌词)的开关
      playPageFlag: false,

      // 定义保存歌词数据的变量
      playingSongData: "",

      // 歌曲播放时间的计时器
      playingTimesInval: 0,

      // 歌曲播放的时间
      playingTimes: 0,


      // 当前歌曲的总时长
      duration:0,

      // 当前歌曲名
      musicName:''
    };
  },

  components: {
    playPage,
  },
  computed: {
    ...mapState(["songsList", "flag", "whichSong",'XplayingModel']),
  },

 



  mounted(){
    this.singerName = this.songsList[0].ar[0].name;
    this.musicPic = this.songsList[0].al.picUrl;
     this.musicName = this.songsList[0].name
  },



 

  watch: {
    whichSong(next) {
      parseInt(next)

      if(next == ''){
        this.$store.commit('CHOOSEWHICH',0)
        return
      }

      let that = ''
      console.log(next);

      // // 当索引改变时将新的歌曲的总时长传递给playPage，用来计算进度条
      // audio的duration属性得到的是秒数
      this.$refs.audio.oncanplay = function(){
        that = this.duration
      }


      setTimeout(()=>{
        if(!that){
          this.duration = 0
        }else{
          this.duration = parseInt((that*1000).toFixed(2))
        }
      },1000)

      


      this.singerName = this.songsList[next].ar[0].name;
      // // 改变歌曲对应的图片
      this.musicPic = this.songsList[next].al.picUrl;
      // // 改变歌曲名
      this.musicName = this.songsList[next].name

      // // 改变音乐资源路径
      playMusic.playMusic(this.songsList[next].id).then((res) => {
        // console.log(res.data.data);
        this.musicUrl = res.data.data[0].url;
      });

      // // 当切换歌曲时(索引下标变化时),需要自动播放被选中的歌曲
      this.$refs.audio.autoplay = true;

   
     
      // // 如果本来是暂停状态，那就需要改变播放按钮样式
      if (this.$refs.audio.paused) {
        this.$store.commit("CHANGEPLAYBTN", false);
      }

      // // 换歌曲了需要将之前开启的定时器关闭
      clearInterval(this.playingTimesInval);

      // // 当歌曲索引改变时也需要获取播放时间
      this.getPlayingTimes();

      // // 获取歌词
      this.$store.dispatch("GET_SONG_LYRIC", this.songsList[this.whichSong].id);
      


      
    },
  },

 

 

  methods: {
    changePopup() {
      this.playPageFlag = !this.playPageFlag;
    },

    ...mapMutations(["SHOWPLAYPAGE", "GET_PLAYING_TIMES", "GET_SONG_LYRIC",'GOT_MUSIC_AUDIO','CHOOSEWHICH']),
    ...mapActions(["GET_MUSIC_LYRIC"]),

    // 定义获取歌曲播放时间的函数
    getPlayingTimes() {
      this.playingTimesInval = setInterval(() => {
        if (this.$refs.audio) {
          this.$store.commit("GOT_PLAYING_TIMES", this.$refs.audio.currentTime*1000);
        }
      }, 1000);
    },

  

    // 定义点击播放，暂停按钮的函数
    turnBtn() {

      this.$store.commit("CHANGEPLAYBTN", this.flag);
      this.$store.commit("GOT_MUSIC_AUDIO", this.$refs.audio);
      // audio身上的paused属性为true表示暂停状态,false为播放状态
      if (this.$refs.audio.paused) {
        // 点击按钮，判断音乐是否播放，如果是播放状态，
        // 那么就暂停播放，并且关闭定时器，如果是暂停状态，那么就开始播放，并且打开定时器
        this.$refs.audio.play();
        this.getPlayingTimes();
        // console.log(1);
      } else {
        // 是播放状态，暂停播放，关闭定时器
        this.$refs.audio.pause();
        clearInterval(this.playingTimesInval);
      }
    },
  },
};
</script>

<style scoped>
.playMusic {
  position: fixed;
  bottom: 49px;
  width: 100%;
  height: 50px;
  border-top: 1px solid #ccc;
  background: rgb(250, 248, 248);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  z-index: 1;
  box-sizing: border-box;
}
.playImg {
  border-radius: 10px;
}

.info {
  display: flex;
  flex-direction: column;
  margin-left: -30px;
  text-align: left;
  width: 150px;
}
</style>